<template>
  <div>
    <h2>Sketch</h2>
    <div style="width: 40px; height: 40px; cursor: pointer" :style="{ backgroundColor: sketchBgColor }" @click="changSketch"></div>
    <Sketch v-model="colors" :show="showSketch" @changButton="changSketchButton" />
  </div>
</template>

<script>
import { Sketch } from '@ans1998/vue3-color';

export default {
  components: {
    Sketch
  },
  data() {
    return {
      colors: "",
      sketchBgColor: "#222",
      showSketch: true
    };
  },
  methods: {
    changSketch() {
      this.showSketch = !this.showSketch;
    },
    changSketchButton(item) {
      this.showSketch = false;
      console.log(item);
      if (item.isOk) {
        console.log('确定');
        this.sketchBgColor = item.activeColor;
      } else {
        console.log('取消');
      }
    }
  }
};
</script>

<style scoped>
/* 你的样式 */
</style>
